import { useLocation } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { Button, Checkbox, Form, Input, Dropdown, Menu } from 'antd'
import { LockOutlined, UserOutlined, TranslationOutlined } from '@ant-design/icons'
import { toggleAntdLang, login } from '@/store/actions'
import './style.scss'

import { IntlProvider, FormattedMessage } from "react-intl"
import zh from '@/locales/zh'
import en from '@/locales/en'

const intlLangs = {
  zh,
  en
}

const langs = [
  { key: 'zh', label: '中文' },
  { key: 'en', label: 'English' }
]

export default () => {
  const { lang } = useSelector(state => state.app)
  const dispatch = useDispatch()
  const { pathname } = useLocation()

  if (pathname === '/login') {
    document.title = '登录 - React Antd Admin'
  }

  const onFinish = values => {
    // console.log('Received values of form: ', values)
    // 不能直接跳转到系统首页，登录完成后，用token换取用户信息，动态生成可访问的路由和菜单
    // navigate('/dashboard', { replace: true })
    dispatch(login(values)) // 异步
  }

  const toggleLang = lang => {
    dispatch(toggleAntdLang(lang))
  }

  return (
    <IntlProvider messages={intlLangs[lang]}>
      <div className='login'>
        <div className='login-header'>
          <h1>
            <FormattedMessage id="login.header" />
          </h1>
          <Dropdown
            overlay={
              <Menu
                items={
                  langs.map(ele => ({
                    key: ele.key,
                    label: (
                      <div
                        style={{ color: lang === ele.key ? 'var(--ant-primary-color)' : 'black' }}
                        onClick={() => toggleLang(ele.key)}
                      >
                        {ele.label}
                      </div>
                    )
                  }))
                }
              />
            }
            placement="bottomRight"
            arrow={{ pointAtCenter: true }}
          >
            <TranslationOutlined />
          </Dropdown>
        </div>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          size='large'
          autoComplete='off'
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: <FormattedMessage id="login.username.tip" />,
              },
            ]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder={lang === 'zh' ? '请输入用户名' : 'Username'}
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: <FormattedMessage id="login.password.tip" />,
              },
            ]}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              placeholder={lang === 'zh' ? '请输入密码' : 'Password'}
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>
                <FormattedMessage id="login.remember" />
              </Checkbox>
            </Form.Item>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              <FormattedMessage id="login.submit" />
            </Button>
          </Form.Item>
        </Form>
      </div>
    </IntlProvider>
  )
}

